let string = `
/*
hi~
北京冬奥会“一墩难求”
让我来画一个可爱的冰墩墩送给你吧。
<(￣︶￣)↗[GO!]
<(￣︶￣)↗[GO!]
<(￣︶￣)↗[GO!]
*/
.BingDwenDwen {
    border: 6px solid #000;
    position: relative;
    left: 50%;
    top: 30px;
    width: 260px;
    height: 300px;
    margin-left: -130px;
    border-radius: 130px 130px 90px 90px;
    background:#fff;
}
.ears {
    border: 1px solid #000;
    width: 45px;
    height: 58px;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 0;
    box-shadow: 205px 0px black;
    background: #000;
}
.leg,
.leg::before {
    position: absolute;
    width: 52px;
    height: 62px;
    border-radius: 10px 23px 10px 23px;
    bottom: -50px;
    left: 60px;
    background: #000;
}
.leg::before {
    content: '';
    top: 0;
    left: 82px;
    border-radius: 23px 10px 23px 10px;
}
.leftHand {
    position: absolute;
    top: 128px;
    left: 0;
    margin-left: -40px;
    border-top: 40px solid #0000;
    border-left: 0px solid #000;
    border-right: 40px solid #000;
    border-bottom: 40px solid #0000;
}
.leftHand::before {
    content: '';
    position: absolute;
    left: -2px;
    top: -0px;
    display: inline-block;
    width: 24px;
    height: 48px;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
    background: #000;
    transform: rotateZ(-45deg);
}
.rightHand {
    position: absolute;
    transform-origin: bottom left;
    top: 130px;
    right: -73px;
    width: 70px;
    height: 48px;
    background: #000;
    border-top-left-radius: 75% 100%;
    transform: rotateZ(-45deg);
}
.rightHand::before {
    content: '';
    position: absolute;
    right: -23px;
    top: 0px;
    display: inline-block;
    width: 24px;
    height: 48px;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
    background: #000;
    transform: rotateZ(180deg);
}
.face {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -105px;
    width: 210px;
    height: 175px;
    border: 1px solid #000;
    box-shadow: 0 0 0 3px red inset,
        0 0 0 6px green inset,
        0 0 0 9px black inset,
        0 0 0 12px yellow inset,
        0 0 0 15px blue inset;
    border-top-left-radius: 50% 60%;
    border-top-right-radius: 50% 60%;
    border-bottom-left-radius: 41% 42%;
    border-bottom-right-radius: 41% 42%
}
.eye,
.eye::before {
    position: absolute;
    top: 62px;
    left: 58px;
    background: black;
    width: 45px;
    height: 64px;
    border-radius: 50%;
    transform: rotateZ(30deg);
}
.eye::before {
    content: '';
    left: 75px;
    top: -44px;
    display: inline-block;
    transform: rotateZ(-60deg);
}
.pupil,
.pupil::before {
    position: absolute;
    z-index: 1;
    left: 75px;
    top: 80px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px white solid;
    background: white;
    box-shadow: -3px -3px 0px 5px black inset;
}
.pupil::before {
    box-sizing: border-box;
    content: '';
    display: inline-block;
    left: 75px;
    top: -5px;
}
.nose {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -8px;
    width: 16px;
    height: 10px;
    background: #000;
    border-top-left-radius: 40% 40%;
    border-top-right-radius: 40% 40%;
    border-bottom-left-radius: 50% 50%;
    border-bottom-right-radius: 50% 50%
}
.mouth {
    position: absolute;
    left: 50%;
    margin-left: -11px;
    width: 22px;
    height: 12px;
    top: 116px;
    background: #ff0000;
    border: 1px solid #000;
    border-bottom-left-radius: 50% 75%;
    border-bottom-right-radius: 50% 75%
}
.heart {
    position: absolute;
    z-index: 1;
    right: -7px;
    top: 14px;
    width: 18px;
    height: 12px;
    background: red;
    border-radius: 50% 0 0 50%;
    transform: rotateZ(120deg);
}
.heart::before {
    content: '';
    display: inline-block;
    background: red;
    position: absolute;
    right: 0;
    top: -7px;
    width: 13px;
    height: 8px;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%
}
@keyframes wave
{
    from {transform: rotateZ(-45deg)}
    to {transform: rotateZ(-50deg)}
}
.rightHand {
    animation: wave 500ms linear alternate infinite;
}
.BingDwenDwen::before{
    content:'';
    width:130px;
    position:absolute;
    border-bottom:4px #000 solid;
    top:35px;
    right:-70%;
    transform:rotate(-10deg);
}
.BingDwenDwen::after{
    content:'感谢观看！';
    font-size:20px;
    color:#000;
    position:absolute;
    top:-5px;
    right:-70%;
    transform:rotate(-20deg)
    
}
/* 
(o゜▽゜)o☆[BINGO!]
(o゜▽゜)o☆[BINGO!]
(o゜▽゜)o☆[BINGO!]
大功告成！
可爱的冰墩墩制作完成，
向你招手呢，
快 say hello 吧~ 
*/
`
document.documentElement.scrollTop = '999px'
let introduce = document.querySelector('.introduce')
let style = document.querySelector('style')
let n = -1
let state = 'pause'
let slow = document.querySelector('.slow')
let middle = document.querySelector('.middle')
let fast = document.querySelector('.fast')
let play = document.querySelector('.play')
let pause = document.querySelector('.pause')
let speed = 30;
let temp = 0;
slow.onclick = () => {
    speed = 60
}
middle.onclick = () => {
    speed = 30
}
fast.onclick = () => {
    speed = 0
}
function fn() {
    state='run'
    n = n + 1
    if (n < string.length) {
        let timeOutId = setTimeout(() => {
            if (string[n] === '\n') {
                introduce.innerHTML = introduce.innerHTML + '<br> '
            } else {
                introduce.innerHTML = introduce.innerHTML + string[n]
            }
            style.innerHTML = style.innerHTML + string[n]
            fn()
            introduce.scrollTo(0, 9999)
        }, speed)
        pause.onclick = () => {
            state='pause'
            window.clearInterval(timeOutId)
        }
        play.onclick = () => {
            if(state==='run'){return}
            timeOutId = setTimeout(() => {
                if (string[n] === '\n') {
                    introduce.innerHTML = introduce.innerHTML + '<br> '
                } else {
                    introduce.innerHTML = introduce.innerHTML + string[n]
                }
                style.innerHTML = style.innerHTML + string[n]
                fn()
                introduce.scrollTo(0, 9999)
            }, speed)
        }
    }
}

fn()